<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
const form = reactive({
  type: [],
});
const flag = ref(false);
let setting = () => {
  // console.log(tabIndex.value,'tabIndex')
  if (tabIndex.value == 1) {
    getChu();
  } else if (tabIndex.value == 2) {
    getJQ();
  } else if (tabIndex.value == 3) {
    getKK();
  } else if (tabIndex.value == 4) {
    getJB();
  }
  flag.value = true;
};

import {
  getAtt,
  getKao,
  setKao,
  getJq,
  setJq,
  getJb,
  setJb,
  getKk,
  setKk,
  getSta,
  setSta,
  putData,
  getDepartment,
} from "../api/axios";
import { useRouter } from "vue-router";

const router = useRouter();
//获取数据
let bmData = ref<any>([]);
const tableData = ref([]);
let adisdone = ref("");
let get = async () => {
  let res = await getAtt(page.value, pagesize.value, form.type);
  total.value = res.data.data.data.total;
  tableData.value = res.data.data.data.rows;
  // console.log(tableData.value, 'table')
  tableData.value.map((item: any) => {
    adisdone.value = item.attendanceRecord;
  });
  // console.log(adisdone.value)
  let res2 = await getDepartment();
  bmData.value = res2.data.data;
};
onMounted(() => {
  get();
});
let btn = () => {
  console.log(form.type);
  get();
};
// 分页
let page = ref(1);
let pagesize = ref(5);
let total = ref(0);
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  page.value = val;
  get();
};
// tab
let tabData = ref<any>("");
let tabIndex = ref<any>(1);

const handleClick = async (id: number) => {
  tabIndex.value = id;
  if (id == 1) {
    getChu();
  } else if (id == 2) {
    getJQ();
  } else if (id == 3) {
    getKK();
  } else if (id == 4) {
    getJB();
  }
};
let selVal = ref(1);
// 获取出勤
let getChu = async () => {
  let res = await getKao(selVal.value);
  tabData.value = res.data.data;
};
// 获取假期
let getJQ = async () => {
  let res = await getJq(selVal.value);
  tabData.value = res.data.data;
  // console.log(tabData.value, '请假');
};
// 获取加班
let getJB = async () => {
  let res = await getJb(selVal.value);
  // console.log(res.data.data);
  tabData.value = res.data.data;
  // console.log(tabData.value);
};
// 获取扣款
let getKK = async () => {
  let res = await getKk(selVal.value);
  tabData.value = res.data.data;
  // console.log(tabData.value, 'tab')
};
// 取消
let cancel = () => {
  flag.value = false;
  tabData.value = "";
  putFlag.value = false;
  putObj.value = "";
  xuan.value = "";
};
// 确定
let que = async () => {
  if (tabIndex.value == 1) {
    q1();
  } else if (tabIndex.value == 2) {
    q2();
  } else if (tabIndex.value == 3) {
    q3();
  } else if (tabIndex.value == 4) {
    q4();
  }
};
let q1 = async () => {
  let obj = {
    id: tabData.value.id,
    companyId: tabData.value.companyId,
    departmentId: tabData.value.departmentId,
    morningStartTime: tabData.value.morningStartTime,
    morningEndTime: tabData.value.morningEndTime,
    afternoonStartTime: tabData.value.afternoonStartTime,
    afternoonEndTime: tabData.value.afternoonEndTime,
  };
  let res = await setKao(obj);
  if (res.data.success) {
    ElMessage({
      showClose: true,
      message: "保存设置成功",
      type: "success",
    });
    cancel();
  }
};
let q2 = async () => {
  console.log(tabData.value, "请假的");
  let res = await setJq(tabData.value);
  console.log(res, "扣款");
  if (res.data.success) {
    ElMessage({
      showClose: true,
      message: "保存设置成功",
      type: "success",
    });
    cancel();
  }
};
let q3 = async () => {
  let res = await setKk(tabData.value);
  console.log(res, "扣款");
  if (res.data.success) {
    ElMessage({
      showClose: true,
      message: "保存设置成功",
      type: "success",
    });
    cancel();
  }
};
let q4 = async () => {
  let obj = {
    departmentId: selVal.value,
    isClock: tabData.value.extraDutyConfig.isClock,
    isCompensationint: tabData.value.extraDutyConfig.isCompensationint,
    latestEffectDate: tabData.value.dayOffConfigs.latestEffectDate,
    unit: tabData.value.dayOffConfigs.unit,
    rules: tabData.value.extraDutyRuleList,
  };
  let res = await setJb(obj);
  if (res.data.success) {
    ElMessage({
      showClose: true,
      message: "保存设置成功",
      type: "success",
    });
    cancel();
  }
};
// 判断名称
let pan = (dedTypeCode: number) => {
  let arr = { 51000: "迟到扣款", 52000: "早退扣款", 53000: "旷工扣款" };
  return arr[dedTypeCode] || "";
};
let pai = (nam: any) => {
  const holidayMap = {
    60000: "年假",
    60100: "事假",
    60200: "病假",
    60300: "婚假",
    60400: "丧假",
    60500: "产假",
    60600: "奖励产假",
    60700: "陪产假",
    60800: "探亲假",
    60900: "工伤假",
    61000: "调休假",
    61100: "产检假",
    61200: "流产假",
    61300: "长期病假",
  };
  return holidayMap[nam] || "";
};
let pai2 = (nam: any) => {
  const arr = {
    1: "正常",
    2: "旷工",
    3: "迟到",
    4: "早退",
    5: "外出",
    6: "出差",
    7: "年假",
    8: "事假",
    9: "病假",
    10: "婚假",
    11: "丧假",
    12: "产假",
    13: "奖励产假",
    14: "陪产假",
    15: "探亲假",
    16: "工伤假",
    17: "调休",
    18: "产检假",
    19: "流产假",
    20: "长期病假",
    21: "补签",
    22: "休息",
  };
  return arr[nam] || "--";
};
let pai3 = (nam: any) => {
  const arr = { 1: "zca", 2: "kga", 3: "cda" };
  return arr[nam] || "wu";
};

// 修改考勤
let putFlag = ref(false);
let xuan = ref("");
let putObj = ref<any>("");
// 开弹框
let kai = async (obj: any) => {
  putObj.value = JSON.parse(JSON.stringify(obj));
  // console.log(obj, 'obj')
  let res = await getSta(obj.userId);
  xuan.value = res.data.data;
  // console.log(xuan.value, 'res')
  putFlag.value = true;
};
// 点击确定
let QD = async () => {
  console.log(putObj.value, "put");
  let obj = {
    userId: putObj.value.userId,
    day: putObj.value.day,
    adtStatu: putObj.value.adtStatu,
    departmentId: putObj.value.departmentId,
  };
  let res = await setSta(putObj.value.id, obj);
  console.log(res, "xiugai");
  if (res.data.success) {
    ElMessage({
      showClose: true,
      message: "保存设置成功",
      type: "success",
    });
    get();
    cancel();
  }
};
</script>
<template>
  <div class="box">
    <div class="top">
      <div class="topOne">
        <p>未处理</p>
        <text>0</text>
      </div>
      <div class="topTwo">
        <el-button @click="router.push('/ditu')">打卡范围</el-button>
        <el-button
          style="background-color: #2752fb; color: #fff"
          @click="setting"
          >设置</el-button
        >
      </div>
    </div>
    <div class="center">
      <el-form :model="form" label-width="auto" style="margin: 0px 40px">
        <el-form-item label="部门:">
          <el-checkbox-group v-model="form.type" @change="btn">
            <el-checkbox
              v-for="item in bmData"
              :value="item.id"
              name="type"
              :key="item"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="180" />
        <el-table-column prop="username" label="姓名" width="180" />
        <el-table-column prop="workNumber" label="工号" width="180" />
        <el-table-column prop="departmentName" label="部门" width="180" />
        <el-table-column prop="mobile" label="手机" width="180" />
        <el-table-column
          v-for="(item, index) in adisdone"
          :label="item.day"
          prop=""
          :key="item.id"
          width="150"
        >
          <template #default="scoped">
            <div
              @click="kai(scoped.row.attendanceRecord[index])"
              :class="pai3(scoped.row.attendanceRecord[index].adtStatu)"
            >
              {{ pai2(scoped.row.attendanceRecord[index].adtStatu) }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <!-- 分页 -->
  <el-pagination
    v-model:current-page="page"
    :page-size="pagesize"
    layout="total, prev, pager, next"
    :total="total"
    @current-change="handleCurrentChange"
  />
  <!-- 修改考勤 -->
  <el-dialog v-model="putFlag" title="设置" width="500" :before-close="cancel">
    <span style="color: red">注：统计考勤时，异常状态优先正常状态</span>
    <el-radio-group v-model="putObj.adtStatu" class="ml-4">
      <el-radio
        v-for="item in xuan"
        :value="Object.keys(item)[0] * 1"
        size="large"
        :key="item"
      >
        {{ Object.values(item)[0] }}
      </el-radio>
    </el-radio-group>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="QD"> 确定 </el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 设置弹窗 -->
  <el-dialog v-model="flag" title="设置" width="1000" :before-close="cancel">
    <div class="heNav">
      <div :class="tabIndex == 1 ? 'active' : ''" @click="handleClick(1)">
        出勤设置
      </div>
      <div :class="tabIndex == 2 ? 'active' : ''" @click="handleClick(2)">
        请假设置
      </div>
      <div :class="tabIndex == 3 ? 'active' : ''" @click="handleClick(3)">
        扣款设置
      </div>
      <div :class="tabIndex == 4 ? 'active' : ''" @click="handleClick(4)">
        加班设置
      </div>
    </div>
    <div v-if="tabIndex == 1">
      <div style="margin-bottom: 20px">
        部门：
        <el-select
          v-model="selVal"
          size="large"
          style="width: 240px"
          @change="getChu"
        >
          <el-option
            v-for="item in bmData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <div>
        <div>
          出勤时间：<el-time-select
            v-model="tabData.morningStartTime"
            style="width: 240px"
          />-<el-time-select
            v-model="tabData.morningEndTime"
            style="width: 240px"
            placeholder="Arbitrary time"
          />
        </div>
        <div style="margin-left: 71px">
          <el-time-select
            v-model="tabData.afternoonStartTime"
            style="width: 240px"
            placeholder="Arbitrary time"
          />-<el-time-select
            v-model="tabData.afternoonEndTime"
            style="width: 240px"
            placeholder="Arbitrary time"
          />
        </div>
      </div>
    </div>
    <div v-if="tabIndex == 2">
      <div style="margin-bottom: 20px">
        部门：
        <el-select
          v-model="selVal"
          size="large"
          style="width: 240px"
          @change="getJQ"
        >
          <el-option
            v-for="item in bmData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <div>
        <div v-for="item in tabData" class="lia" :key="item">
          <div style="width: 500px">{{ pai(item.leaveType) }}</div>
          <el-switch
            v-model="item.isEnable"
            :active-value="1"
            :inactive-value="0"
          />
        </div>
      </div>
    </div>
    <div v-if="tabIndex == 3">
      <div style="margin-bottom: 20px">
        部门：
        <el-select
          v-model="selVal"
          size="large"
          style="width: 240px"
          @change="getKK"
        >
          <el-option
            v-for="item in bmData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="nav">
        <div v-for="item in tabData" class="lis" :key="item">
          <div>
            {{ pan(item.dedTypeCode) }}
            <el-switch
              v-model="item.isEnable"
              class="ml-2"
              :active-value="1"
              :inactive-value="0"
            />
          </div>
          <div v-if="item.dedTypeCode == 53000">
            <div style="margin-left: 40px; margin-top: 20px">
              {{ pan(item.dedTypeCode).slice(0, 2) }}按<el-input
                style="width: 50px"
                v-model="item.fineSalaryMultiples"
              />倍工资处罚
            </div>
          </div>
          <div v-else>
            <div style="margin-left: 40px; margin-top: 20px">
              {{ pan(item.dedTypeCode).slice(0, 2) }}

              <el-input
                style="width: 50px"
                v-model="item.periodUpperLimit"
              />分钟
              <div style="margin-left: 80px; margin-top: 20px">
                <div>
                  {{ pan(item.dedTypeCode).slice(0, 2) }}
                  */
                  <el-input
                    style="width: 50px"
                    v-model="item.timesLowerLimit"
                  />
                  次,每次扣款<el-input
                    style="width: 50px"
                    v-model="item.dedAmonutUpperLimit"
                  />元
                </div>
                <div style="margin-top: 10px">
                  {{ pan(item.dedTypeCode).slice(0, 2) }}
                  >=
                  <el-input
                    style="width: 50px"
                    disabled
                    v-model="item.timesLowerLimit"
                  />次,每次扣款<el-input
                    style="width: 50px"
                    v-model="item.dedAmonutLowerLimit"
                  />元
                </div>
              </div>
            </div>
            <div style="margin-left: 40px; margin-top: 20px">
              {{ pan(item.dedTypeCode).slice(0, 2) }}
              >=
              <el-input
                style="width: 50px"
                disabled
                v-model="item.periodLowerLimit"
              />分钟
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="tabIndex == 4">
      <div style="margin-bottom: 20px">
        部门：
        <el-select
          v-model="selVal"
          size="large"
          style="width: 240px"
          @change="getJB"
        >
          <el-option
            v-for="item in bmData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <div>
        <div>
          加班规则:
          <div class="li" v-for="item in tabData.extraDutyRuleList" :key="item">
            <div>
              <el-switch
                v-model="item.isEnable"
                :active-value="1"
                :inactive-value="0"
              />{{ item.rule }}
            </div>
            <div>
              <input type="checkbox" v-model="item.isTimeOff" />调休假
              <el-time-select
                v-model="item.ruleStartTime"
                style="width: 150px"
                placeholder="Arbitrary time"
              />-<el-time-select
                v-model="item.ruleEndTime"
                style="width: 150px"
                placeholder="Arbitrary time"
              />
            </div>
          </div>
        </div>
        <div v-if="tabData.extraDutyConfig">
          打卡验证：<el-switch
            v-model="tabData.extraDutyConfig.isClock"
            :active-value="1"
            :inactive-value="0"
          />加班需要打卡记录
          <br />
          开启补偿：<el-switch
            v-model="tabData.extraDutyConfig.isCompensationint"
            :active-value="1"
            :inactive-value="0"
          />
        </div>
        <div v-if="tabData.dayOffConfigs">
          调休假设置：最晚有效期：次年
          <el-date-picker
            v-model="tabData.dayOffConfigs.latestEffectDate"
            type="date"
            :size="size"
          />
        </div>
        <div v-if="tabData.dayOffConfigs">
          请假最小单位<el-input
            style="width: 40px"
            v-model="tabData.dayOffConfigs.unit"
          />天
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="que"> 保存更新 </el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.box {
  box-sizing: inherit;
  background-color: #f5f6f8;
  padding: 15px;
}

.top {
  height: 120px;
  display: flex;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #ffff;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 0px 20px;
}

.topOne {
  font-size: 20px;
}

.center {
  margin-top: 10px;
  background-color: #ffff;
}

.nav {
  margin-top: 20px;
}

.li {
  width: 80%;
  box-sizing: content-box;
  padding: 0 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lia {
  width: 40%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.heNav {
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.heNav div {
  margin-left: 20px;
  font-size: 20px;
  font-weight: bold;
}

.active {
  color: #0bf;
  border-bottom: 3px solid #0bf;
}

.zca {
  background-color: #67c23a;
  color: whtie;
}

.kga {
  color: red;
}

.cda {
  background-color: #e6a23c;
  color: whtie;
}
</style>
